<template>
    <div>
        <div class="content white-block"
             v-loading="loading"
             :element-loading-text="'加载需要' + number + '秒'"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.1)">
            <div class="provider">
                <span class="state mr10 request" name="">选择服务</span>
                <el-select v-model="servcode" filterable @change="currentSel"
                           @visible-change="visibleChange" ref="select"
                           placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.serviceid"
                        :label="item.servname + '（'+item.servcode+'）'"
                        :value="item.servcode">
                        <!--                            {{item.servcode}}-->
                    </el-option>
                </el-select>
                <span class="state mr10" name="">请求头类型</span>
                <el-input class="input ml20" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="text-right">
                <el-button type="primary" class="ml20 btn" icon="el-icon-s-promotion" @click="query">发送
                </el-button>
            </div>
            <div>

                <div>
                    <p class="requestHeader">请求</p>
                    <div class="parameterMsg">
                        <el-checkbox v-model="headercheck" @change="headcheck">header</el-checkbox>
                        <el-checkbox v-model="body" @change="bodyCheck">body</el-checkbox>
                    </div>
                    <div v-if="headerFlag">
                        <el-button type="primary" class="mt20 headerColor">header</el-button>
                        <el-link type="primary" :underline="false" icon="el-icon-delete" class="ml20"
                                 @click="clearHeaderParameter" v-if="clearFlag">清空参数
                        </el-link>
                        <el-link type="primary" :underline="false" icon="el-icon-circle-plus-outline" class="ml20"
                                 @click="add" v-if="addFlag">添加
                        </el-link>
                    </div>
                    <div class="mt10 inputStyle" v-for="(item,i) in list" :key="item.i" v-if="headerFlagBox">
                        <el-checkbox v-model="item.checkedHeader" @change="checkedParameter"></el-checkbox>
                        <el-input v-model="item.requestkeyInput" placeholder="参数名"></el-input>
                        <el-input v-model="item.requestvalueInput" placeholder="参数值" class="ml20"></el-input>
                        <span class="inputIcon" @click="deleteHeader(item,i)"><i class="el-icon-close"></i></span>
                    </div>
                    <div v-if="bodyFlagBox">
                        <el-button type="primary" class="mt20 headerColor">body</el-button>
                        <el-link type="primary" :underline="false" icon="el-icon-delete" class="ml20"
                                 @click="clearBodyParameter" v-if="bodyFlag">清空参数
                        </el-link>
                        <el-link type="primary" :underline="false" icon="el-icon-circle-plus-outline" class="ml20"
                                 @click="add1" v-if="bodyFlag">添加
                        </el-link>
                    </div>
                    <div class="mt10 inputStyle" v-for="(item,index) in parameterList" :key="index" v-if="bodyFlag">
                        <el-checkbox v-model="item.checkedBody" @change="checkedParameterBody"></el-checkbox>
                        <el-input v-model="item.keyInput" placeholder="参数名"></el-input>
                        <el-input v-model="item.valueInput" placeholder="参数值" class="ml20"></el-input>
                        <span class="inputIcon" @click="deleteBody(item,index)"><i class="el-icon-close"></i></span>
                    </div>
                    <div class="jsonBox mt10" v-if="jsonBox">
                        <el-input v-model="jsonText" type="textarea" class="textarea"
                                  :autosize="{ minRows: 8, maxRows: 8}"></el-input>
                    </div>
                </div>
            </div>
            <div class="parameterMsg1">
                <breadcrumb :title="'返回报文'"></breadcrumb>
            </div>
            <div class="return-msg">
                {{returnMsg}}
            </div>
        </div>
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    // import logDetails from "../monitoring/logDetails"

    export default {
        data() {
            return {
                headercheck: false,
                body: false,
                addFlag: true,
                clearFlag: true,
                headerFlag: false,
                headerFlagBox: false,
                bodyFlag: false,
                checkedHeader: false,
                checkedBody: false,
                loading: false,
                requestHeader: [
                    {
                        prop: 'key',
                        label: '<i class="error">*</i>' + 'KEY',
                        minWidth: '35%',
                        align: 'center'
                    },
                    {
                        prop: 'value',
                        label: '<i class="error">*</i>' + 'VALUE',
                        minWidth: '35%',
                        align: 'center'
                    }
                ],
                header: [
                    {
                        prop: 'key',
                        label: '<i class="error">*</i>' + 'KEY',
                        minWidth: '35%',
                        align: 'center'
                    },
                    {
                        prop: 'value',
                        label: '<i class="error">*</i>' + 'VALUE',
                        minWidth: '35%',
                        align: 'center'
                    }
                ],
                slotColumns: ['key', 'value'],
                servcode: '',
                options: [],
                input: '',
                selection: {
                    width: 100,
                    align: 'center',
                    headerAlign: 'center'
                },
                keyInput: '',
                valueInput: '',
                requestkeyInput: '',
                requestvalueInput: '',
                requestList: [],
                listBox: [],
                valBox: [],
                returnMsg: null,
                returnMsgKey: [],
                returnMsgVal: [],
                list: [{requestkeyInput: '', requestvalueInput: '', checkedHeader: false}],
                parameterList: [{keyInput: '', valueInput: '', checkedBody: false}],
                obj: {},
                key: '',
                value: '',
                keyVal: {},
                tableMsg: true,
                jsonText: '',
                jsonBox: false,
                count: 0,
                number: 0,
                contentType: '',
                bodyFlagBox: false
            }
        },
        mounted() {
            this.getSelect()
        },
        methods: {
            add() {
                this.list.push({requestkeyInput: '', requestvalueInput: '', checkedHeader: false})
            },
            deleteHeader(index) {
                this.list.splice(index, 1)
                for (let i = 0; i < this.list.length; i++) {
                    this.list[i].index = i
                }
            },
            add1() {
                this.parameterList.push({keyInput: '', valueInput: '', checkedBody: false})
            },
            deleteBody(index) {
                this.parameterList.splice(index, 1)
                for (let i = 0; i < this.parameterList.length; i++) {
                    this.parameterList[i].index = i
                }
            },
            // 请求头展示问题
            headcheck() {
                if (this.headercheck === true) {
                    this.headerFlag = true
                    this.headerFlagBox = true
                } else {
                    this.headerFlag = false
                    this.headerFlagBox = false
                }

            },
            bodyCheck() {
                if (this.body === true && this.contentType !== '2') {
                    this.bodyFlag = true
                    this.bodyFlagBox = true
                } else {
                    this.bodyFlag = false
                    this.bodyFlagBox = true
                    this.jsonBox = true
                }
                if (this.body === false) {
                    this.jsonBox = false
                    this.bodyFlagBox = false
                }
            },
            // 查询所有标准服务
            getSelect() {
                this.$http.get('/EsbInboundMain/selectAllService').then(result => {
                    if (result.success) {
                        for (let i = 0; i < result.data.length; i++) {
                            this.options.push(result.data[i])
                        }
                    }
                })
            },
            // 清空参数
            clearHeaderParameter() {
                for (let i = 0; i < this.list.length; i++) {
                    this.list[i].requestkeyInput = ''
                    this.list[i].requestvalueInput = ''
                    this.list[i].checkedHeader = false
                }
            },
            clearBodyParameter() {
                for (let i = 0; i < this.parameterList.length; i++) {
                    this.parameterList[i].keyInput = ''
                    this.parameterList[i].valueInput = ''
                    this.parameterList[i].checkedBody = false
                }
            },
            checkedParameter() {
                if (this.list.checkedHeader === false) {
                    this.list.checkedHeader = true
                } else {
                    this.list.checkedHeader = false
                }
            },
            checkedParameterBody() {
                if (this.parameterList.checkedBody === false) {
                    this.parameterList.checkedBody = true
                } else {
                    this.parameterList.checkedBody = false
                }
            },
            query() {
                let headerList = {}, bodyList = {}, countTime
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].checkedHeader === true) {
                        headerList[this.list[i].requestkeyInput] = this.list[i].requestvalueInput
                    }
                }
                for (let i = 0; i < this.parameterList.length; i++) {
                    if (this.parameterList[i].checkedBody === true) {
                        bodyList[this.parameterList[i].keyInput] = this.parameterList[i].valueInput
                    }
                }
                this.loading = true
                clearInterval(countTime)
                this.number = this.count
                countTime = setInterval(() => {
                    this.number--
                    if (this.number === -1) {
                        clearInterval(countTime)
                        this.number = this.count
                    }
                }, 1000)
                // this.returnMsg = {}
                if (this.input === 'application/json') {
                    if (this.jsonText === '') {
                        this.$http.post('/EsbInboundMain/serviceSimulation', {
                            servcode: this.servcode,
                            data: {},
                            header: headerList
                        }).then(result => {
                            if (result.success) {
                                this.returnMsg = result.data
                                this.loading = false
                                clearInterval(countTime)
                            } else {
                                this.loading = false
                            }
                        })
                    } else {
                        this.$http.post('/EsbInboundMain/serviceSimulation', {
                            servcode: this.servcode,
                            data: JSON.parse(this.jsonText),
                            header: headerList
                        }).then(result => {
                            if (result.success) {
                                this.returnMsg = result.data
                                this.loading = false
                                clearInterval(countTime)
                            } else {
                                this.loading = false
                            }
                        })
                    }
                } else {
                    this.$http.post('/EsbInboundMain/serviceSimulation', {
                        servcode: this.servcode,
                        data: bodyList,
                        header: headerList
                    }).then(result => {
                        if (result.success) {
                            this.returnMsg = result.data
                            this.loading = false
                            clearInterval(countTime)
                        } else {
                            this.loading = false
                        }
                    })
                }

            },

            currentSel(servcode) {
                this.headercheck = false
                this.body = false
                this.bodyFlag = false
                this.headerFlag = false
                this.headerFlagBox = false
                this.bodyFlagBox = false
                this.jsonBox = false
                this.input = ''
                this.list = [{requestkeyInput: '', requestvalueInput: '', checkedHeader: false}]
                this.parameterList = [{keyInput: '', valueInput: '', checkedBody: false}]
                this.$http.get('/EsbInboundMain/selectServiceContentByServcode', {
                    servcode: servcode
                }).then(result => {
                    if (result.success) {
                        if (result.data[0].contentType === '1') {
                            this.input = 'multipart/form-data'
                        } else if (result.data[0].contentType === '2') {
                            this.input = 'application/json'
                        } else if (result.data[0].contentType === '3') {
                            this.input = 'application/x-www-form-urlencoded'
                        } else if (result.data[0].contentType === '4') {
                            this.input = 'text/xml'
                        } else if (result.data[0].contentType === '5') {
                            this.input = 'application/xml'
                        }
                        this.contentType = result.data[0].contentType || ''
                        // debugger
                        // if (result.data[0].contentType === '2') {
                        //     if (this.bodyCheck === true) {
                        //         this.jsonBox = true
                        //     }
                        //     this.headerFlagBox = false
                        //     this.addFlag = false
                        //     this.clearFlag = false
                        // } else {
                        //     if (this.bodyCheck === true) {
                        //         this.headerFlagBox = true
                        //         this.addFlag = true
                        //         this.clearFlag = true
                        //     } else {
                        //         this.headerFlagBox = false
                        //         this.addFlag = false
                        //         this.clearFlag = false
                        //     }
                        //     this.returnMsg = ''
                        //     this.jsonBox = false
                        //
                        // }
                        this.count = (result.data[0].overTime - 0) / 1000
                    }
                })
            },

            visibleChange(val) {
                if (!val) {
                    this.$refs.select.blur()
                }
            },
            // 自定义搜索下拉框
            // dataFilter(servcode) {
            //     this.$http.get('/EsbInboundMain/selectServiceByServcode', {
            //         servcode: servcode
            //     }).then(result => {
            //         if (result.success) {
            //             this.options = result.data
            //         }
            //     })
            // },
            selectionChange(val) {
                // val: 实时当前被选中
                this.valBox = val
                // for (let i = 0; i < this.valBox.length; i++) {
                //     this.obj[this.valBox[i].keyInput] = this.valBox[i].valueInput
                // }
            },
            selectionChange1(val) {
                this.listBox = val
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .requestHeader {
        margin-bottom: 0;
        margin-top: .3rem;
        font-size: 0.18rem;
        font-weight: bold;
        /*border-bottom: .01rem solid #FF9A66;*/
    }

    .inputIcon {
        color: #ccc;
    }

    .headerColor {
        background-color: #f09f70;
        color: #fff;
        border: none;
    }

    .headerColor:hover {
        background-color: #f09f70;
    }

    .btn {
        margin-right: .7rem;
    }

    .el-textarea {
        textarea {
            height: 1rem;
        }
    }

    .el-select {
        width: 45%;
    }

    .el-input {
        width: 33%;
    }

    .content {
        width: 100%;

        .table {
            width: 90%;
            position: relative;
            /*float: left;*/
            margin-top: .1rem;

            span {
                width: .3rem;
                height: .2rem;

                .el-input {
                    width: 70%;
                }

                .add {
                    position: absolute;
                    top: .11rem;
                    right: -.42rem;
                    color: #5586FB;
                }
            }

        }

        .jsonBox {
            .textarea {
                width: 70%;
            }
        }

        .provider {
            width: 85%;
            float: left;

            span {
                margin-left: .3rem;
                font-size: .16rem;
            }

            .request {
                margin-left: 0;
            }

        }

        .parameterMsg {
            /*margin-top: 0.1rem;*/
            height: .5rem;
            line-height: .5rem;
            background-color: #FBFBFB;
            width: 100%;
        }

        .parameterMsg1 {
            margin-top: .3rem;
            clear: both;
        }

        .return-msg {
            width: 100%;
            height: 2.08rem;
            overflow-y: auto;
            overflow-x: hidden;
            font-size: .14rem;
            border: .01rem solid #ccc;
            word-wrap: break-word;
            word-break: break-all;
            clear: both;
        }
    }
</style>

